<template>
  <div class="container">
    <el-card class="box-card">
      <div class="time">
        <div class="title">活动时段:</div>
        <div
          class="button"
          :class="{
            active: status === '',
            disabled: isCustom,
          }"
          @click="isCustom ? null : setstatus('')"
        >
          全部
        </div>
        <div
          class="button"
          :class="{
            active: status === '1',
            disabled: isCustom,
          }"
          @click="isCustom ? null : setstatus('1')"
        >
          本周
        </div>
        <div
          class="button"
          :class="{
            active: status === '2',
            disabled: isCustom,
          }"
          @click="isCustom ? null : setstatus('2')"
        >
          本月
        </div>

        <div class="title">活动状态:</div>
        <div
          class="button"
          :class="{ active: dateStatus === '' }"
          @click="setdateStatus('')"
        >
          全部
        </div>
        <div
          class="button"
          :class="{ active: dateStatus === '0' }"
          @click="setdateStatus('0')"
        >
          未开始
        </div>
        <div
          class="button"
          :class="{ active: dateStatus === '1' }"
          @click="setdateStatus('1')"
        >
          进行中
        </div>
        <div
          class="button"
          :class="{ active: dateStatus === '2' }"
          @click="setdateStatus('2')"
        >
          已结束
        </div>
        <div class="title">自选:</div>
        <el-date-picker
          style="margin-left: 1vw"
          size="small"
          v-model="time"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="onDateChange"
        >
        </el-date-picker>
      </div>
    </el-card>
    <el-card class="box-card2" ref="boxCard2Container">
      <div class="header">
        <div class="title">比赛列表</div>
        <!-- <div class="more">查看全部</div> -->
      </div>
      <div class="box">
        <div class="loading-dialog" v-if="isLoading" v-loading="true"></div>
        <div
          class="nullSource"
          v-if="!tableData.length"
          style="
              width: 40vw;
              height: 40vh;
              display: flex;
              margin:auto
              align-items: center;
            "
        >
          <img
            src="../../../assets/course_img/nullSouceShow.png"
            style="width: 100%; height: 100%; object-fit: contain"
            alt=""
          />
        </div>
        <div class="boxlist" v-for="(item, index) in tableData" :key="index">
          <div class="img">
            <img :src="$store.state.user.BASE_URL + item.coverImage" alt="" />
            <div v-if="false" class="title">已报名：30人</div>
          </div>
          <div class="info">
            <div class="header">
              <div class="name">{{ item.matchName }}</div>
              <div class="status">
                {{ item.matchScoreType == 1 ? "积分赛" : "巅峰赛" }}-{{
                  item.matchType == 1 ? "个人赛" : "班级赛"
                }}
              </div>
            </div>
            <div class="hr"></div>
            <div class="time">
              比赛时间：{{ item.startTime?item.startTime.slice(0,10):'' }} 至 {{ item.endTime?item.endTime.slice(0,10):'' }}
            </div>
            <div class="project">比赛项目：{{ item.matchCode }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getStuHealthLogList } from "@/api/sportsevent/index";
export default {
  name: "WorkspaceJsonIndex",

  data() {
    return {
      time: [],
      status: "",
      dateStatus: "",
      isCustom: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      isLoading: false,
    };
  },

  mounted() {
    this.getsportseventlist();
    this.$nextTick(() => {
      this.$refs.boxCard2Container.$el.addEventListener(
        "scroll",
        this.handleScroll
      );
    });
  },

  beforeUnmount() {
    this.$refs.boxCard2Container.$el.removeEventListener(
      "scroll",
      this.handleScroll
    );
  },
  watch: {
    time(newDate) {
      if (!newDate) {
        this.clearCustomDate();
      }
    },
  },
  methods: {
    handleScroll() {
      const boxCard2Container = this.$refs.boxCard2Container.$el;
      const scrollTop = boxCard2Container.scrollTop;
      const clientHeight = boxCard2Container.clientHeight;
      const scrollHeight = boxCard2Container.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.tableData.length < this.total) {
          this.pageNum++;
          this.getsportseventlist();
        }
      }
    },
    onDateChange() {
      if (this.time !== null && this.time !== undefined) {
        this.getsportseventlist(true);
        this.isCustom = true;
      }
    },
    clearCustomDate() {
      this.time = [];
      this.isCustom = false;
      this.customDateSelected = false;
      this.resetstatusStyles();
      this.getsportseventlist();
    },
    resetstatusStyles() {
      this.status == "0";
      const buttons = document.querySelectorAll(".button");
      buttons.forEach((button) => {
        button.classList.remove("disabled");
      });
    },
    getsportseventlist(reload = false) {
      this.isLoading = true;
      if (reload) {
        this.pageNum = 1;
        this.tableData = [];
      }
      let data = {
        schoolId: this.$store.state.user.USER_INFO.pscShId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.dateStatus,
        dateStatus: this.time !== null && this.time.length === 0 ? this.status : "",
        startTime:
          this.time !== null && this.time.length === 0 ? "" : this.time[0],
        endTime:
          this.time !== null && this.time.length === 0 ? "" : this.time[1],
      };
      console.log(data);
      getStuHealthLogList(data).then((res) => {
        if (res.code === 200) {
          this.isLoading = false;
          this.tableData = this.tableData.concat(res.result);
          this.total = res.total;
        }
      });
    },
    setstatus(period) {
      if (this.status !== period) {
        this.status = period;
        this.pageNum = 1;
        this.getsportseventlist(true);
      }
    },
    setdateStatus(status) {
      if (this.dateStatus !== status) {
        this.dateStatus = status;
        this.pageNum = 1;
        this.getsportseventlist(true);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.loading-dialog {
  height: 100%;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.container {
  padding: 2.6vh 11.1vw;
  box-sizing: border-box;
  .box-card {
    width: 79vw;
    height: 8vh;
    .time {
      text-align: center;
      align-items: center;
      display: flex;
      .title {
        font-size: 0.93vw;
        font-weight: 600;
        color: #333333;
        margin-left: 1vw;
      }
      .button {
        cursor: pointer;
        margin-left: 1vw;
        font-size: 0.83vw;
        font-weight: 400;
        color: #999999;
        width: 3.416vw;
        height: 1.813vw;
        line-height: 1.813vw;
        border-radius: 0.1036vw;
      }
      .active {
        background: #d9edff;
        color: #1677ff;
      }
      .disabled {
        cursor: not-allowed;
        background: #f0f0f0;
        color: #999999;
        border-color: #ccc;
      }
    }
  }
  .box-card2 {
    width: 79vw;
    max-height: 77vh;
    height: 74vh;
    margin-top: 1.09vw;
    overflow-y: auto;
      position: relative;

    .header {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 0.93vw;
        font-weight: 600;
        color: #333333;
      }
      .more {
        cursor: pointer;
        font-size: 0.93vw;
        font-weight: 400;
        color: #1677ff;
      }
    }
    .box {
      display: flex;
      width: 76.2vw;
      flex-wrap: wrap;
      margin-top: 2.4vh;
      .boxlist {
        margin-bottom: 1.4vh;
        width: 17.68vw;
        height: 32.8vh;
        margin-left: 1.1vw;
        .img {
          width: 100%;
          height: 19.2vh;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          .title {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0.1036vw;
            padding: 0.4vh 0.2vw;
            font-size: 0.62vw;
            font-weight: 400;
            color: #ffffff;
            position: absolute;
            right: 0.52vw;
            bottom: 1vh;
          }
          img {
            height: 100%;
              width: 100%;
              object-fit:contain;
              margin: 0;
          }
        }
        .info {
          padding: 0 0.62vw;

          .header {
            margin-top: 1.6vh;
            .name {
              font-size: 0.724vw;
              color: #999999;
            }
            .status {
              font-size: 0.62vw;
              color: #1677ff;
            }
          }
          .hr {
            margin-top: 1.6vh;
            width: 15.96vw;
            height: 0.1vh;
            background: #f0f0f0;
          }
          .time {
            margin-top: 1.6vh;
            font-size: 0.72vw;
            color: #999999;
          }
          .project {
            margin-top: 1.6vh;
            font-size: 0.72vw;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
